<template>
  <div class="top-product-container">
 
    <div class="content">
      <div v-for="(item, index) in productList" :key="index" class="product-item">
        <div class="product-info">
          <span class="rank">{{ index + 1 }}</span>
          <span class="name">{{ item.product_name }}</span>
        </div>
        <el-progress 
          :percentage="calculatePercentage(item.count)"
          :color="getProgressColor(index)"
          :show-text="false"
        />
        <span class="count">{{ item.count }}</span>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getTopProducts } from '@/apis/admin/order'

const productList = ref([])

const calculatePercentage = (count) => {
  if (productList.value.length === 0) return 0
  const maxCount = Math.max(...productList.value.map(item => item.count))
  return Math.round((count / maxCount) * 100)
}

const getProgressColor = (index) => {
  const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
  return colors[index % colors.length]
}

const fetchData = async () => {
  try {
    const res = await getTopProducts()
    if (res.success) {
      productList.value = res.data
    }
  } catch (error) {
    console.error('获取产品排行数据失败:', error)
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style lang="less" scoped>
.top-product-container {
  
  border-radius: 8px;
  padding: 20px;
  padding-bottom: 0;
  height: 100%;


  .content {
    .product-item {
      display: flex;
      align-items: center;
      margin-bottom: 16px;

      .product-info {
        width: 120px;
        display: flex;
        align-items: center;
        
        .rank {
          width: 20px;
          height: 20px;
          background: #f0f2f5;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          color: #606266;
          margin-right: 8px;
        }

        .name {
          font-size: 14px;
          color: #606266;
        }
      }

      :deep(.el-progress) {
        flex: 1;
        margin: 0 12px;
      }

      .count {
        width: 40px;
        text-align: right;
        font-size: 14px;
        color: #909399;
      }
    }
  }
}
</style>
